	var oLoading = document.getElementById("loading");
	var oLoadingFail = document.getElementById("loading-fail");
	createLoading(oLoading);
/*=====================search function=============================
	var oSearchbtn = document.getElementById("searchbtn");
	oSearchbtn.onclick = jumpPage;
	function jumpPage()
	{
		var searchContent = document.getElementById("search").value;
		console.log(searchContent);
		console.log("search-result.html?searchContent="+searchContent);
		window.open("search-result.html?searchContent="+searchContent);
	}*/
/*================== course-nav start ====================*/

	var oCourseDirection = document.getElementById("course-direction");
	var oCourseType = document.getElementById("course-type");
	var oCourseLevel = document.getElementById("course-level");
	var aDirections = oCourseDirection.getElementsByTagName("dd");
	var aTypes = oCourseType.getElementsByTagName("dd");
	var aLevels = oCourseLevel.getElementsByTagName("dd");
	var currentDirection = 0;
	var currentType = 0;
	var currentLevel = 0;
	var isConnecting = false;
	var askLimitTimer;



	for(var i=0;i<aDirections.length;i++){
		aDirections[i].index = i;
		aDirections[i].onclick = function(){
			if(!isConnecting){
				//修改样式
				changeStyle(this,aDirections,currentDirection);
				currentDirection = this.index;
				askCourseInfor();
			}
		}
	}
	for(var i=0;i<aTypes.length;i++){
		aTypes[i].index = i;
		aTypes[i].onclick = function(){
			if(!isConnecting){
				//修改样式
				changeStyle(this,aTypes,currentType);
				currentType = this.index;
				askCourseInfor();
			}
		}
	}
	for(var i=0;i<aLevels.length;i++){
		aLevels[i].index = i;
		aLevels[i].onclick = function(){
			if(!isConnecting){
				//修改样式
				changeStyle(this,aLevels,currentLevel);
				currentLevel = this.index;
				askCourseInfor();
			}
		}
	}
	function changeStyle(obj,set,currentIndex){
		if(obj.index != currentIndex){
			addClass(obj,"style-clicked");
			removeClass(set[currentIndex],"style-clicked");
		}
	}


/*================== course-nav end ====================*/

/*================== course-box start ====================*/
	
	var oCourseWrapper = getElementsByClass("course-wrapper")[0];

	var aCourseSortBy = document.getElementById("course-sort").getElementsByTagName("li");
	var oArrowLeft = document.getElementById("arrow-left");
	var oArrowRight = document.getElementById("arrow-right");
	var oCurrentPage = document.getElementById("current-page");
	var oTotalPage = document.getElementById("total-page");
	var sortBy = 0;
	/*------course sort by new or hot start-------*/
	for(var i=0;i<aCourseSortBy.length;i++){
		aCourseSortBy[i].index = i;
		aCourseSortBy[i].onclick = function(){
			if(!isConnecting){
				//change style
				addClass(this,"selected");
				removeClass(aCourseSortBy[(this.index + 1)%2],"selected");
				sortBy = this.index;
				//send request
				askCourseInfor();
			}
		}
	}
	//左右箭头点击事件
	oArrowLeft.onclick = frontPage;
	oArrowRight.onclick = nextPage;
	 
	/*------course sort by new or hot end-------*/

	//设置course-wrapper中课程的信息
	//coursesInfor:json
	//setCourseWrapper({"totalPage":12,"1":{"id":1,"type":"HTML/CSS","level":"高级","title":"HTML+CSS基础教程","desc":"HTML+CSS基础教程8小时带领大家步步深入学习标签用法和意义","info":999,"price":0}});
	function setCourseWrapper(coursesInfor){
		oCourseWrapper.innerHTML = "";
		for(var i=0;i<20;i++){
			var course = coursesInfor[i+1];
			if(course){
				var oCourseCard = createCourseCard();
				oCourseCard.courseCard.href = "course-info.html?courseId="+course.id;
				oCourseCard.courseType.innerText = course.type;
				oCourseCard.courseLevel.innerText = course.degree;
				oCourseCard.courseTitle.innerText = course.coursename;
				oCourseCard.courseDesc.innerText = course.detail;
				oCourseCard.courseInfo.innerText = course.click_nums + "人在学习";
				oCourseCard.coursePrice.innerText = "免费";
				if(!course.price || course.price==0){
					addClass(oCourseCard.coursePrice,"course-card-price-free");
					oCourseCard.coursePrice.innerText = "免费";
				}else{
					oCourseCard.coursePrice.innerText = "￥" + course.price;
				}
				if((i+1)%5 == 0){
					addClass(oCourseCard.wrapper,"last-item");
				}else{
					addClass(oCourseCard.wrapper,"item");
				}
				oCourseWrapper.appendChild(oCourseCard.wrapper);
				
			}
		}
	}

	/*-------- page bar start ----------*/

	var oPagebar = document.getElementById("page-bar");
	var aPageBtn = oPagebar.getElementsByTagName("span");
	var currentPage = 1;
	var currentPageIndex = 1;
	var tempPage = 1;
	var totalPage = 1;

	aPageBtn[0].onclick = function(){
		if(currentPage != 1 && !isConnecting){
			tempPage = 1;
			askCourseInfor();
		}
	}
	aPageBtn[1].onclick = frontPage;
	aPageBtn[aPageBtn.length - 2].onclick = nextPage;
	aPageBtn[aPageBtn.length - 1].onclick = function(){
		if(currentPage != totalPage && !isConnecting){
			tempPage = totalPage;
			askCourseInfor();
		}
	}
	for(var i=2;i< aPageBtn.length - 2;i++){
		aPageBtn[i].index = i-1;
		aPageBtn[i].onclick = function(){
			if(this.index != currentPageIndex && !isConnecting){
				tempPage = currentPage + this.index - currentPageIndex;
				askCourseInfor();
			}
		}
	}
	
	/*-------- page bar end ----------*/
	function nextPage(){
		if(currentPage != totalPage && !isConnecting){
			tempPage = currentPage + 1;
			askCourseInfor();
		}
	}
	function frontPage(){
		if(currentPage != 1 && !isConnecting){
			tempPage = currentPage - 1;
			askCourseInfor();
		}
	}
	function showPage(page){
		//将要显示页面页码所在位置
		//1234 3456 5678 偶数在第二四个位置 奇数在第一三个位置，第一和第四位置特殊
		var index = page%2 == 0?2:3;
		//页码在右边界
		if(totalPage - page < 3){
			index = 4 + page - totalPage;
		}
		//页码在左边界
		if(page - 1 < 3){
			index = page;
		}
		var tempIndex = index;
		for(var i=0;i<aPageBtn.length-4;i++){
			aPageBtn[i+2].innerText = page - tempIndex + 1;
			tempIndex--;
		}
		currentPage = page;
		removeClass(aPageBtn[currentPageIndex+1],"page-style-clicked");
		addClass(aPageBtn[index+1],"page-style-clicked");
		currentPageIndex = index;
		//显示第一页时上一页按钮无效
		currentPage == 1?addClass(aPageBtn[1],"btn-disable"):removeClass(aPageBtn[1],"btn-disable");
		//显示最后一页时下一页按钮无效
		currentPage == totalPage?addClass(aPageBtn[aPageBtn.length - 2],"btn-disable"):removeClass(aPageBtn[aPageBtn.length - 2],"btn-disable");
		oCurrentPage.innerText = currentPage;
		oTotalPage.innerText = totalPage;
	}

	function askCourseInfor(){ 
		if(!isConnecting){
			showLoading();
			var url ="/cyl/getCourse";//访问路径
			var data = {
				director:aDirections[currentDirection].getAttribute("value"),
				type :aTypes[currentType].getAttribute("value"),
				degree :aLevels[currentLevel].getAttribute("value"),
				orderstyle : sortBy,
				page :tempPage
			};
			
			ajax({
				type:"post",
				url:url,
				data:data,
				success:askInforSuccess,
				fail:askInforFail
			});
			askLimitTimer = window.setTimeout(askLimit,30*1000);
			isConnecting = true;
		}
	}
	function askInforSuccess(response){
		var respJson = JSON.parse(response);
		hideLoading();
		window.clearTimeout(askLimitTimer);
		isConnecting = false;
		//设置页码
		 respJson[0]?totalPage = respJson[0].totalPage : totalPage = 1;
		//如果总页数少于4多余按钮隐藏
		for(var i=0;i<aPageBtn.length - 4;i++){
			aPageBtn[i+2].style.display = "inline-block";
		}
		for(var i=totalPage;i<aPageBtn.length - 4;i++){
			aPageBtn[i+2].style.display = "none";
		}
		showPage(tempPage);
		setCourseWrapper(respJson);
	}
	function askInforFail(response){
		showLoadingFail();
		window.clearTimeout(askLimitTimer);
		isConnecting = false;
	}
	function askLimit(){
		askInforFail();
	}
/*================== course-box end ====================*/
	function showLoading(){
		hideLoadingFail();
		oLoading.style.display = "block";
	}
	function hideLoading(){
		oLoading.style.display = "none";
	}
	function showLoadingFail(){
		hideLoading();
		oLoadingFail.style.display = "block";
	}
	function hideLoadingFail(){
		oLoadingFail.style.display = "none";
	}

	function createLoading(box){
		var transY = getStyle(box,"font-size");
		for(var i=0;i<8;i++){
			var span = document.createElement("span");
			addClass(span,"point");
			box.appendChild(span);
			span.style.transform = "rotateZ("+360/8*i+"deg) translateY("+transY+")";
		}
	}
	askCourseInfor();